<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>在职流程图</title>
  <link rel="stylesheet" type="text/css" href="semantic.min.css">
  <style type="text/css">
  body{
    font-family: 微软雅黑;
  }
  .my-content{
    word-wrap: break-word;
    border: 2px #FFFFFF solid;
    background-color: #4BACC6;
    color: #FFFFFF;
    text-align: center;
    float: left;
    width: 300px;
    height:150px;
    margin-right: 500px;
    font-size: 30px;
    font-weight: bold;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: rgb(150,150,150) 5px 5px;
    -webkit-box-shadow: rgb(150,150,150) 5px 5px;
    box-shadow: rgb(150,150,150) 5px 5px;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  -o-box-align: center;
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  }
  .content-farme{
    z-index: 100;
    position: fixed;
    top:10%;
    width:10000px;
    height:230px;
    overflow: hidden;
    background-image:url("arrow2.png");
  }
  .content-main{
    width:40000px;
    position: relative;
    left:500px;
  }
  .current-my-content{
    background-color: #006699;
  }

  .menu_btn{
    position:fixed;
    left:0px;
    top:0px;
  }
  .walk_man{
    z-index: 50;
    position:fixed;
    left:480px;
    top:35%;
    cursor: pointer;
  }
  .walk_man img{
    height:500px;
  }
  </style>
</head>
<body>

  <div class="ui large vertical inverted labeled icon sidebar my-sidebar" ms-controller="menu">
    <div class="ui vertical menu" style="width:250px;">
      <a class="my-menu item" ms-repeat="contents" ms-click="gotostep($index)">{{el}}</a>
    </div>
  </div>

  <div class="menu_btn">
    <button type="button" class="ui button tiny" id="my-btn">目录</button>
  </div>

  <div class="content-farme" ms-controller="step">
    <div class="content-main">
      <div class="my-content item" ms-repeat="contents" ms-click="show_modal">{{el}}</div>
    </div>
  </div>

  <div class="walk_man">
    <img src="stop.gif" id="walk_man"></div>

<div class="ui basic modal">
        <div class="header">
            xxxxxxxxxxx
        </div>
        <div class="content">
            <div class="left">
                <i class="home"></i>
            </div>
            <div class="right">
            <p> xxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </p>
            </div>
        </div>
        <div class="actions">
            <div class="two fluid ui buttons">
                <div class="ui positive right labeled button">
                    关 闭
                    <i class="checkmark"></i>
                </div>
            </div>
        </div>
    </div>


  <script src="jquery.min.js"></script>
  <script src="semantic.min.js"></script>
  <script type="text/javascript" src="avalon.js"></script>

<script type="text/javascript">
var contents = ['开始', '入职','转单','入职登记','签订劳动合同','参加社会保险','部门入职培训','培训考核合格上岗','六个月试用期满','继续工作','接受部门年度考核','考核合格享受奖金','工作满一年','本人提出续签申请','部门提出续签意见','人力资源部审核','中心领导审批','续签劳动合同','取得继续教育本科学历','本人向部门提出申请','人力资源部审核','中心领导审批','发放奖励金','聘为领班','结婚','聘为科室负责人','参加科室负责人竞聘','提升为主管','因公出差','参加部门负责人竞聘','聘为部门负责人','上交因私出国（境）证件','填写个人事项报告','因私出国（境）','到达法定退休年龄','办理退休手续','光荣退休']

var model_menu = avalon.define("menu", function(vm){
  vm.contents = contents;
  vm.gotostep = function(i){
    goto(i);
  }
});

var model_content = avalon.define("step", function(vm){
  vm.contents = contents;
  vm.show_modal = function () {
    $('.basic.modal').modal('show');
  }
});

var moving=false;
var current_content = 0;
var btn_left = '0px';
var walk_speed = 2000;

$('#my-btn').bind('click', function(){
  if (btn_left=='0px'){btn_left='270px'}else{btn_left='0px'};
  $('.my-sidebar').sidebar({
  overlay: true
  }).sidebar('toggle');
  $('.menu_btn').animate({ "left": btn_left }, 200);
})

$('.walk_man').bind('click', function(){
  goto(current_content+1);
})

function goto(step){
  if(moving || step==current_content){return};
  moving = true;
  $('.my-menu').eq(current_content).removeClass('active');
  $('.my-menu').eq(step).addClass('active');
  $('.my-content').eq(current_content).removeClass('current-my-content').animate({"height": "150px", "width":"300px", "font-size":"30px"});
  current_content = step;
  var w = step * 805 + (-508);
  $('#walk_man').attr('src', 'walking.gif');
  $('.content-main').animate({ "left": -(w) }, walk_speed, function(){
    $('#walk_man').attr('src', 'stop.gif')
    if(step>0){$('.my-content').eq(step).addClass('current-my-content').animate({"height": "220px", "width":"500px", "font-size":"75px"})};
    moving=false;
  });
}
</script>
</body>
</html>